<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Flash文件上传组件DEMO示例</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="fileUpload.js"></script>
	<style>
		body{
		}
		.demoTitle{
			font-weight:bold;
			text-align:center;
			height:60px;
			background:#EFEDDF;
		}
		body table td{
			text-align:center;
			font-size:14px;
		}
		.intro td{
			text-align:left;
		}
		.leftTip{
			background:#CCCCCC;
			width:100px;
		}
	</style>
	<script>
		//上传组件参数初始化
		var setting={
					id:"FileUpload",
					swfPath:"<%=path%>/includes/FileUpload/FileUploadForHr.swf",
					serverPath:"<%=path%>/servlet/FileUploadManagerServlet",
					imgPath:"<%=path%>/includes/FileUpload/fileUpload.gif",
					width:128,
					height:128,
				 	fileSize:"50",
					noFileType:"*.exe",
				 	checkAndUploadExtend:checkAndUploadExtend,
				 	uploadOnProgressExtend:uploadOnProgressExtend,
				 	uploadCompleteExtend:uploadCompleteExtend
					};
				
		/*上传文件有效性判断*/
		function checkAndUploadExtend(id,serverJson){
			//如果你想获取当前上传组件参数的话
			//var parameters=FU.getSettingById[id];
			if(serverJson.checkType=="all"){
				//各种校验通过,如果你想在文件正式上传前做点什么的话，你就在这做吧！
				$("#fileInfo").html(serverJson.fileName);
				$("#json1").html(FU.jsonToStr(serverJson));
			}else if(serverJson.checkType=="suffix"){
				//文件后缀名有误
				alert("文件后缀名有误1");
			}else if(serverJson.checkType=="noSuffix"){
				//不允许的后缀名出错
				alert("不允许的后缀名有误1");
			}else if(serverJson.checkType=="size"){
				//文件大小有误
				alert("文件大小有误1");
			}
		}
		
		/*文件上传进度控制*/
		function uploadOnProgressExtend(id,serverJson){
			var percentFormat=Math.floor(serverJson.percent*100);
			$("#json2").html(FU.jsonToStr(serverJson));
			$("#uploadInfo").html(percentFormat+"%");
		}
		
		/*文件上传成功后，将服务器返回值返回到页面*/
		function uploadCompleteExtend(id,serverJson){
			$("#json3").html(serverJson);
			
			//如果你想在文件上传结束后做点什么的话，你就在这做吧！
		}
		
	</script>
  </head>
  
  <body>
    <table cellpadding="0" cellspacing="0" border="1" width="80%" style="margin:auto;">
    	<tr><td colspan="2" class="demoTitle">Flash文件上传组件DEMO示例</td></tr>
        <tr>
        	<td width="200" height="40">组件介绍</td>
            <td style="padding:10px;text-align:left;">
            	我是上传组件FU，首先我要告诉你我很懒，我不管后台文件你怎么存，用啥技术，也不管上传后你页面怎么展现，我只管给你校验文件类型，给你验证文件大小，给你监控上传进度，然后帮你把后台处理的返回值传递到页面。不过话又说回来，虽然懒，但我非常灵活，灵活在哪？你自己琢磨吧^_^。
            </td>
        </tr>
    	<tr>
    		<td colspan="2">
		    	<script>
		    		//调用上传组件
					FU.iniFlashPlayer(setting);
				</script>
			</td>
    	</tr>
        <tr>
        	<td width="200" height="40">文件信息</td>
            <td id="fileInfo">暂无
            	
            </td>
        </tr>
    	<tr>
    		<td width="200"  height="40">上传进度</td>
    		<td id="uploadInfo">暂无
            	
    		</td>
    	</tr>
    	<tr>
    		<td width="200"  height="40">有效性判断Json返回值,对应(checkAndUploadExtend)</td>
    		<td id="json1">暂无
            	
    		</td>
    	</tr>
    	<tr>
    		<td width="200"  height="40">进度控制Json返回值,对应(uploadOnProgressExtend)</td>
    		<td id="json2">暂无
            	
    		</td>
    	</tr>     
    	<tr>
    		<td width="200"  height="40">上传成功后后台Json返回值，对应(uploadCompleteExtend)</td>
    		<td id="json3">暂无
            	
    		</td>
    	</tr>     
        <tr>
    		<td width="200"  height="40">使用代码示例</td>
    		<td style="text-align:left;">
            	<img src="code.gif"/>
    		</td>
    	</tr>   
        <tr>
    		<td width="200"  height="40">setting上传参数说明</td>
    		<td style="text-align:left;">
            	<table class="intro">
                	<tr><td class="leftTip">id</td><td>flash组件唯一编号，用于js和flash间传值</td></tr>
                    <tr><td class="leftTip">swfPath</td><td>swf源文件路径</td></tr>
                    <tr><td class="leftTip">serverPath</td><td>文件上传后台代码，组件本身不关注怎么实现，只是将后台返回值传递到页面</td></tr>
                    <tr><td class="leftTip">imgPath</td><td>上传组件背景图，可以相对swf也可以相对于整个应用路径</td></tr>
                    <tr><td class="leftTip">width</td><td>flash组件宽度,跟着背景图的宽度走吧</td></tr>
                    <tr><td class="leftTip">height</td><td>flash组件高度,跟着背景图的高度走吧</td></tr>
                    <tr><td class="leftTip">fileSize</td><td>允许上传的文件大小，单位M</td></tr>
                    <tr><td class="leftTip">noFileType</td><td>不允许上传的文件格式，此外还有一参数，允许上传的文件格式，fileType,二者选其一使用</td></tr>
                    <tr><td class="leftTip">checkAndUploadExtend</td><td>校验文件大小和类型自定义扩展，可以不进行扩展，有默认，但还是自己扩展使用吧!这样灵活</td></tr>
                    <tr><td class="leftTip">uploadOnProgressExtend</td><td>上传进度控制，如果不想要什么进度条，上传百分比的话，这个可以不要</td></tr>
                    <tr><td class="leftTip">uploadCompleteExtend</td><td>上传完成，文件上传完了，你应该有事情做吧，在这做</td></tr>
                </table>
    		</td>
    	</tr>    
    </table>
    <div style="text-align:center;font-size:12px;color:#999999;margin-top:5px;">liuyong#chinasofti.com|liuyongcic#163.com</div>
  </body>
</html>
